<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/layouts/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>创建友情链接</title>
    <%@include file="/WEB-INF/layouts/edit-header.jsp" %>
    <script src="${staticPath}/upload/photoclip/hammer.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="${staticPath}/upload/photoclip/iscroll-zoom.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="${staticPath}/upload/photoclip/photoClip.min.js?n=1" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var _ctx = '${ctx}';
        var _staticPath = '${staticPath}';
    </script>
    <style type="text/css">
        #clip {
            width: 100%;
            height: 300px;
        }
    </style>
</head>
<body>

<div class="tpanel">
    <div class="panel-content">
        <div class="container-fluid">

            <form id="createForm" class="form-horizontal">

                <div class="form-group form-group-first">
                    <label class="col-sm-2 control-label">链接图片</label>
                    <div class="col-sm-8">
                        <div class="col-xs-6 col-md-2" style="padding-left: 0px;padding-right: 0px;">
                            <div class="text-center thumbnail">
                                <a data-toggle="modal" data-target="#avatar-modal">
                                    <img id="logoImage" class="img-responsive" alt="点击图片上传"
                                         src="${staticPath}/upload/default-header.jpg">
                                </a>
                            </div>
                            <input type="text" class="hidden" name="logoUrl" id="logoUrl" placeholder="请选择LOGO并点击上传" required
                                   minlength="1" value="">
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="name" class="col-sm-2 control-label">链接名称</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control"
                               id="name" name="name"
                               value=""
                               placeholder="请输入名称(必填)" required
                               minlength="0" maxlength="50"
                        />
                    </div>
                </div>

                <div class="form-group">
                    <label for="description" class="col-sm-2 control-label">链接描述</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control"
                               id="description" name="description"
                               value=""
                               placeholder="请输入描述"
                               minlength="0" maxlength="200"
                        />
                    </div>
                </div>

                <div class="form-group">
                    <label for="url" class="col-sm-2 control-label">链接地址</label>
                    <div class="col-sm-8">
                        <input type="url" class="form-control"
                               id="url" name="url"
                               value=""
                               placeholder="请输入URL(必填)" required
                               minlength="0" maxlength="1000"
                        />
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-12" style="text-align: center;">
                        <a class="btn btn-default" href="back();">返回</a>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="submit" class="btn btn-primary" value="保存"/>
                    </div>
                </div>

            </form>

        </div>
    </div>
</div>

<div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog"
     tabindex="-1" style="z-index: 9999999">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal" type="button">&times;</button>
                <h4 class="modal-title" id="avatar-modal-label">上传图片</h4>
            </div>
            <div class="modal-body">
                <div class="btn-group" style="margin-bottom: 20px;width: 100%">
                    <button type="button" class="btn btn-danger pull-left" id="toggle-file">选择要上传的文件</button>
                    <button class="btn btn-danger pull-right" id="clipBtn" type="button" title="保存" data-dismiss="modal">
                        <span class="fa fa-save">保存</span>
                    </button>
                </div>
                <div id="clip"></div>
                <input class="hidden" type="file" id="file">
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    changeTitle('创建友情链接');
    $(function () {

        initForm('#createForm', '${ctx}/admin/cms/friendlylink/create', function (r) {
            var resp = $.parseJSON(r);
            if (resp.code == 'OK') {
                changeUrl('${ctx}/admin/cms/friendlylink');
                topLayer.msg('保存成功', {icon: 1});
            } else {
                topLayer.msg(resp.message, {icon: 2});
            }
        });
        var $clip = $("#clip");
        var $file = $("#file");
        $("#toggle-file").click(function () {
            $file.trigger("click");
        });
        $clip.photoClip({
            width: 200,
            height: 200,
            view: "#clip",
            fileMinSize: 10,
            file: $file,
            defaultImg: "${staticPath}/upload/default-header.jpg",
            ok: "#clipBtn",
            loadStart: function () {
            },
            loadError: function () {
                window.parent.layer.msg('图片加载失败', {icon: 2});
            },
            loadComplete: function (result) {
                console.log("照片读取完成");
            },
            imgSizeMin: function (kbs) {
                window.parent.layer.msg('上传图片过小', {icon: 2});
            },
            clipFinish: function (dataURL) {
                imagesAjax(dataURL);
            }
        });

        function imagesAjax(src) {
            var data = {};
            data.img = src;
            $.ajax({
                url: "${ctx}/admin/cms/friendlylink/uploderLogo",
                data: data,
                type: "POST",
                dataType: 'json',
                success: function (result) {
                    $('#logoImage').attr("src", _ctx + result.concreteImagePath);
                    $('#logoUrl').val(result.imagePath);
                }
            });
        }
    });
</script>
</body>
</html>
